<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题目库</title>
  <link rel="icon" href="image/网页图标.png" type="image/x-icon">

  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
  <script src="js/top.js"></script>

  <style>
    *{
		padding: 0;
        margin: 0;
	}
	html, body, #app {
		width: 100%;
		height: 100%;
		font-size: 14px;
	}
	.el-container{
		width: 100%;
		height: 100%;
	}
	.el-header{
		width: 100%;
		padding: 0%;
	}
  
  /* 卡片 */
  .c1{
    width: 100%;
    height: 100%;
    font-size: 35px;
  }

  /* 弹出 */
  .d1{
    width: 200px;
    height: 400px;
    position: absolute;
    z-index: 100;
    left: 10%;
  }

  /* 浮动 */
  .f{
    float: left;
  }

  .i1{
    position: relative;
    top: -15px;
  }

  .p1{
    margin: 8px 10px 0 10px;
    text-decoration: none;
      color: #333333;
  }
    .user{
        float: right;
        position: relative;
        left: -40px;
        top: 15px;
    }
    .td1{
        width: 100%;
        height: 100%;
    }
    .card {
        width: 100%;
        height: 98px;
    }
    .typec{
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 假设每行3个卡片 */
        gap: 10px; /* 网格间隙 */
    }
    .cardleft{
        width: 40%;
        height: 100%;
    }
    .cardright{
        width: 60%;
        height: 100%;
    }
    .image1{
        width: 60px;
        height: 50px;
        margin: 10px 0 0 10px;
    }
    .flex-center {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        height: 60px; /* 或其他高度 */
        font-size: 30px;
    }
  </style>
</head>

<body>
    <div id="app">
        <el-container>
            <!-- 头部 -->
            <el-header height="12%">
                <top></top>
            </el-header>
            <!-- 身体 -->
            <el-main>
<!--                分类界面-->
                <div class="td1">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane :label="type.tname" :name="type.id" v-for="type in btypes">
                            <div class="typec">
                                <el-card class="card" v-for="s in stypes">
                                    <div class="cardleft f" @click="getQuestions(s.id)"><img class="image1" :src="s.image"></div>
                                    <div class="cardright f flex-center" @click="getQuestions(s.id)"><p>{{s.tname}}</p></div>
                                </el-card>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-main>
        </el-container>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                activeName: 1,
                btypes:{},
                stypes:{}
            },
            created() {
                //查询大类别列表
                this.getBigType();
            },
            methods: {
                handleClick(tab, event) {
                    this.getSmType(this.activeName);
                },
                //查询大类别列表
                getBigType(){
                    this.getSmType(this.activeName);
                    axios.get("cloud-other/type/getBigType").then(res=>{
                        this.btypes = res.data.data;
                    });
                },
                //查询小类别
                getSmType(num){
                    axios.get("cloud-other/type/getSmType?id=" + num).then(res=>{
                        this.stypes = res.data.data;
                    });
                },
                //查看类别题目
                getQuestions(num){
                    location.href = "typequestion.html?id=" + num;
                }
            }
        });
    </script>
    
</body>
</html>